<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${type == 'add' ? '新增' : '修改'}定金参数`,
			size: '30%',
			appendToBody: true
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-card shadow="never">
			<el-form
				:model="form"
				:rules="rules"
				ref="form"
				label-width="100px"
				label-position="top"
				class="demo-form"
			>
				<el-form-item label="事业部" prop="biz_id">
					<cl-select
						v-model="form.biz_id"
						style="width: 100%"
						:disabled="type == 'edit'"
						@change="changeBiz"
					>
						<el-option
							v-for="item in business"
							:key="item.biz_id"
							:label="item.biz_name"
							:value="item.biz_id"
						></el-option>
					</cl-select>
				</el-form-item>
				<el-form-item label="品牌" prop="bra_id">
					<cl-select v-model="form.bra_id" style="width: 100%">
						<el-option
							v-for="item in bizRefData.brand"
							:key="item.bra_id"
							:label="item.bra_name"
							:value="item.bra_id"
						/>
					</cl-select>
				</el-form-item>
				<template>
					<el-form-item label="银联-B扫C-商户号" prop="mid">
						<el-input
							v-model="form.mid"
							placeholder="请输入银联-B扫C-商户号"
							type="text"
						>
						</el-input>
					</el-form-item>
					<el-form-item label="银联-B扫C-终端号" :required="true" prop="tid">
						<el-input v-model="form.tid" placeholder="请输入银联-C扫B-终端号" />
					</el-form-item>
				</template>
			</el-form>
		</el-card>
	</cl-drawer>
</template>

<script>
export default {
	data() {
		return {
			form: {
				mid: "",
				tid: "",
				biz_id: "",
				bra_id: ""
			},
			rules: {
				biz_id: [{ required: true, message: "请选择事业部" }],
				mid: [{ required: true, message: "请输入银联-B扫C-商户号" }],
				tid: [{ required: true, message: "请输入银联-B扫C-终端号" }],
				bra_id: [{ required: true, message: "请选择品牌" }]
			},
			saving: false,
			type: "add"
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		open(data = {}, type) {
			this.type = type;
			if (type == "edit") {
				this.form = { ...data };
				this.form.bra_id = this.form?.bra_id ? data.bra_id : "";
			}
			this.init();
			this.$refs.drawer.create();
		},
		async init() {
			const { biz_id } = this.form;
			this.getBizRefBrand(biz_id);
		},
		submit() {
			this.$refs.form.validate(async valid => {
				if (!valid) return;
				this.saving = true;
				await this.$service.syspay[this.type == "add" ? "add" : "edit"](this.form).done(
					() => {
						this.saving = false;
					}
				);
				this.$refs.drawer.close();
				this.reset();
				this.$message.success(`${this.type == "add" ? "新增" : "修改"}成功`);
				this.$emit("confirm");
			});
		},
		reset() {
			this.$refs.form.resetFields();
			this.$resetFields(this.form);
			this.form.biz_id = this.getCurrBiz();
		},
		changeBiz() {
			this.form.bra_id = "";
			this.init();
		}
	}
};
</script>

<style></style>
